<template>
	<div class="xiake">
		
	<div class="main">
		<div class="xiake-top">
			<div class="city">
				<label>杭州</label><i class="iconfont">&#xe621;</i>
		   </div>
		<form class="search">
			<i class="iconfont">&#xe62d;</i>
			<input type="text" placeholder="冰雪童话" />
		</form>
	</div>
	<div>
	<ul class="slider_btn">
		<li>热搜</li>
	</ul>
	</div>
	<div class="swiper xiake-swiper">
		
	<ul class="swiper-wrapper">
		<li class="swiper-slide">
			<img src="@/assets/img/001.jpg" />
		</li>
		<li class="swiper-slide">
			<img src="@/assets/img/002.jpg" />
		</li>
		<li class="swiper-slide">
			<img src="@/assets/img/003.jpg" />
		</li>
		<li class="swiper-slide">
			<img src="@/assets/img/004.jpg" />
		</li>
		<li class="swiper-slide">
			<img src="@/assets/img/005.jpg" />
		</li>
		<li class="swiper-slide">
			<img src="@/assets/img/006.jpg" />
		</li>
		<li class="swiper-slide">
			<img src="@/assets/img/007.jpg" />
		</li>
		<li class="swiper-slide">
			<img src="@/assets/img/008.jpg" />
		</li>
	</ul>
	<div class="swiper-pagination"></div>
	</div>
	</div>
	</div>
</template>

<script>
	import {onMounted} from 'vue';
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	export default{
		name:'Xiake',
		setup(){
			onMounted( ()=>{ 
				new Swiper('.swiper' ,{
					loop :true,
					pagination : {
						el :'.swiper-pagination'
					},
				})
			})
		}
	}
</script>

<style scoped>
	.main{
		margin-top: 0;
		position: relative;
		width: 100%;
		background-color: #ffdd40;
		height: 5.6rem;
	}
	.xiake-top{
		left: 0;
		top: 0rem;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 95%;
		height: 1rem;
		background-color:  #ffdd40;
	}
	.xiake-top .city{
		font-weight: 800;
		color: black;
		font-size: 0.4rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		padding-right: 0.4rem;
	}
	.xiake-top .city i{
		vertical-align: middle;
		padding-left: 0.1rem;
	}
	.xiake-top .search{
		flex: 1;
		background-color: white;
		border-radius: 0.8rem;
		overflow: hidden;
		line-height: 0.8rem;
	}
	.xiake-top .search i{
		display: inline-block;
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
	}
	.xiake-top .search input{
		border: none;
		width: 80%;
		line-height: 0.8rem;
		text-indent: 1em;
		font-size: 0.3rem;
	}
	
 .slider_btn {
	margin-left:0.2rem ;
	font-size: 0.3rem;
	color: black;
	}
	.xiake-swiper{
		width: 100%;
		height: 5.6rem;
	}
	.xiake-swiper img{
		width: 90%;
		height: 90%;
		border-radius: 0.6rem;
		margin-top: 0.5rem;
		margin-left: 0.5rem;
	}
</style>
